<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-col :span="24">
          <div  id="menuDiv">
            <div>
              <h3>No.1 组</h3>
            </div>
            <el-menu
                :default-active="activeMenu"
                :collapse="isCollapse"
                :unique-opened="true"
                :collapse-transition="false"
                mode="vertical"
                router>
              <el-submenu :index="item.id" v-for="item in menuList">
                <template slot="title">
                  <i :class="'el-icon-'+item.icon"></i>
                  <span>{{item.name}}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item :index="children.path" v-for="children in item.children"><i :class="'el-icon-'+children.icon"></i>{{children.name}}</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </div>
        </el-col>
      </el-aside>
      <el-container>
        <el-header>
          <div id="menuOpenDiv">
            <el-switch
                v-model="isCollapse"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="false"
                :inactive-value="true">
            </el-switch>
          </div>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "IndexView",
  data(){
    return{
      activeMenu:'',
      menuList:[],
      isCollapse:false
    }
  },methods:{
    init(){
      this.axios.get("/menu/menu/menuList").then(res=>{
        this.menuList=res.data.data
      })
    }
  },created(){
    this.init()
  }
}
</script>

<style scoped>
#menuOpenDiv{
  float: left;
}
#menuDiv{
  position: fixed;
}


</style>